<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <meta name="keywords" content="文乐文">
    <meta name="description" content="文乐文">

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css">
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="static/css/common.css" type="text/css">
</head>

<body class="index-page">
    <div id="app" v-cloak>
        <div class="car">
            <img src="./static/image/car.png" alt="" srcset="">
        </div>
        <!-- 包含公共头部文件  header_fixed -->

        <div class="header container header_fixed">
            <div class="logo_box">
                <img src="static/picture/logo2.png">
            </div>
            <div class="nav_box">
                <a href="index.html">
                    <div class="item active">首页</div>
                </a>
                <a href="goods.html">
                    <div class="item ">产品中心</div>
                </a>
                <a href="integral.html">
                    <div class="item">积分商城</div>
                </a>
                <a href="lease.html">
                    <div class="item ">进销存ERP</div>
                </a>
                <a href="service.html">
                    <div class="item ">服务与支持</div>
                </a>
                <a href="my.html">
                    <div class="item ">个人中心</div>
                </a>
            </div>
            <div class="buy-box">
                <a href="javascript:;" class="tit">购买</a>
                <div class="sub" style="display: none;">
                    <div class="list">
                        <a target="_blank" href="https://mall.jd.com/index-11504190.html?from=pc">文乐文京东旗舰店</a>
                        <!--<a target="_blank" href="/">文乐文天猫旗舰店</a>-->
                    </div>
                </div>
            </div>
            <div class="search_box">
                <input name="keyword" type="text" class="search_input" id="header_search_input" placeholder="搜索">
                <button id="header_search_btn" class="search_btn"></button>
            </div>
           
        </div>


        <!-- 首页顶部图片及导航  start -->
        <div class="banner_box">
            <div class="banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="pc-img"
                            style="background: url(static/image/banner11.jpg) no-repeat 100%;background-position: center;">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="pc-img"
                            style="background: url(static/image/banner22.jpg) no-repeat 100%;background-position: center;">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="pc-img"
                            style="background: url(static/image/banner331.jpg) no-repeat 100%;background-position: center;">
                        </div>
                    </div>
                </div>
                <div class="btns"></div>
            </div>


            <!-- banenr底部导航 -->
            <!-- <div class="banner_bt_nav wow fadeInUp animated">
                <div class="banner_nav_box row f-cb" style="margin-left: 300px;display: flex;">
                        <el-input v-model="keyword" style="width: 240px" placeholder="查询" />
                        <button @click="toOrder" class="btn btn-primary login_btn" type="button">查询</button>
                </div>
            </div> -->


            <!-- banenr底部登录模块 -->
            <div class="banenr_login">
                <div class="user_icon">
                    <img src="static/picture/user_icon.jpg">
                </div>
                
                <div class="login_box" v-if="!islogin">
                    <div class="login_tab ">
                        <div @click="loginType = 1" :class="loginType == 1?'active':''" class="item " type="password">密码登录</div>
                        <div @click="loginType = 2" :class="loginType == 2?'active':''" class="item" type="code">验证码登录</div>
                    </div>
                    <div class="item">
                        <input name="account" v-model="loginForm.account" type="text" class="form-control"
                            placeholder="手机">
                    </div>
                    <div class="item item-password" v-if="loginType == 1">
                        <input name="password" v-model="loginForm.password" type="password" class="form-control"
                            placeholder="密码">
                    </div>
                    <div class="item item-code" v-if="loginType == 2">
                        <input type="text" v-model="loginForm.captcha" class="form-control" name="code" autocomplete="off" placeholder="验证码">
                        <label class="send_code" @click="getCode">{{timeOut == 60?'获取验证码':timeOut+'s'}}</label>
                    </div>
                    <div class="btn_box">
                        <div class="remember_box">
                            <input type="checkbox" name="is_remember" value="1"> &nbsp;记住密码
                        </div>
                        <button @click="login" id="fat-btn" class="btn btn-primary login_btn"
                            data-loading-text="Loading..." type="button">登录</button>
                    </div>
                </div>
                <div class="login_box" v-else style="font-size: 15px;">
                    <div>姓名：{{userData.data.nikeName}}</div>
                    <div>手机号：{{userData.data.phone}}</div>
                    <button style="margin-top: 10px;" @click="loginOut" id="fat-btn" class="btn btn-primary login_btn" type="button">退出登录</button>
                    <button @click="toOrder" style="margin-top: 10px;margin-left: 10px;" id="fat-btn" class="btn btn-primary login_btn" type="button">我的订单</button>
                    <button style="margin-top: 10px;" @click="chongzhipwd" id="fat-btn" class="btn btn-primary login_btn" type="button">重置密码</button>
                    <button @click="toCreateOrder" style="margin-top: 10px;margin-left: 10px;" id="fat-btn" class="btn btn-primary login_btn" type="button">快速下单</button>
                </div>
                </div>
            </div>
        <!-- 首页顶部图片及导航 end -->





        <!-- 新品 start -->
        <div class="index_new">
            <div class="title">热门商品/<span>Hot commodity</span></div>
            <div class="new_box container">
                <a :href="'detail.html?id='+item.id" v-for="(item,index) in hotgoods" :key="index">
                    <div class="item col-sm-3">
                        <div class="img_box">
                            <img :src="item.image">
                        </div>
                        <div class="name_box">
                            <div class="name">{{item.storeName}}</div>
                            <div class="btn_box">
                                <button class="btn btn-primary buy_btn" type="button">购买</button>
                            </div>
                        </div>
                    </div>
                </a>
               
            </div>
        </div>
        <!-- 新品 end -->




        <div class="index_contact">
            <div class="container">
                <div class="contact_left_box">
                    <div class="title">联系我们/<span>Contact us</span></div>
                </div>
                <div class="contact_right_box">
                    <div class="item">
                        <div class="title">加入文乐文</div>
                        <div class="subtitle">欢迎加入文乐文大家庭</div>
                        <a href="contact.html">
                            <div class="into_btn"> </div>
                        </a>
                    </div>
                    <div class="item">
                        <div class="title">加盟网点</div>
                        <div class="subtitle">这里有最全的文乐文网点供你查询</div>
                        <a href="service.html">
                            <div class="into_btn"> </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 包含公共底部文件 -->
        <div class="footer">
            <div class="footer_box container">
                <div class="contact_box col-sm-4 f-cb">
                    <div class="dtitle">服务/Service</div>
                    <div class="tel_box">
                        <p class="title">全国统一热线电话</p>
                        <p class="tel">0574-58974484</p>
                    </div>
                    <div class="mail_box">
                        <p class="title">服务邮箱</p>
                        <p class="mail">598292588@qq.com</p>
                    </div>
                </div>
                <div class="nav_list col-sm-4 f-cb">
                    <div class="dtitle">导航/Navigation</div>
                    <ul class="nav_box">
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="index1.html">商品中心</a></li>
                        <li><a href="lease.html">打印机租赁</a></li>
                        <li><a href="service.html">服务与支持</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                </div>
                <div class="search col-sm-4 f-cb">
                    <div class="dtitle">产品中心/Product center</div>
                    <div class="search_box">
                        <input class="search_input" name="keyword" placeholder="搜索">
                        <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
                        <a class="btn btn-primary jd_btn" target="_blank"
                            href="https://mall.jd.com/index-11504190.html?from=pc">京东商城</a>
                    </div>
                    <div class="wechat_box">
                        <div class="item">
                            <img src="static/picture/wechat.svg">
                        </div>
                        <div class="item">
                            <img src="static/picture/weibo.svg">
                        </div>
                    </div>
                </div>
            </div>

            <div class="site_info container">
                Copyright ©2020 宁波文乐文科技有限公司 版权所有 <a
                    href="https://beian.miit.gov.cn/#/Integrated/index">浙ICP备2020041669号-1</a>
            </div>
        </div>
    </div>
  

    <link rel="stylesheet" href="static/css/index.css" rel="stylesheet">
    <script src="static/js/vue.js"></script>
    <script src="static/js/index.full.js"></script>

    <script src="static/js/jquery.js" type="text/javascript"></script>
    <script src="static/js/swiper.min.js" type="text/javascript"></script>
    <script src="static/js/common.js" type="text/javascript"></script>
    <script>
        $(function () {
            var banSwiper = new Swiper('.banner', {
                effect: "fade",
                fade: {
                    crossFade: true
                },
                autoplay: 5000,
                loop: true,
                pagination: ".banner .btns",
                paginationClickable: true,
                autoplayDisableOnInteraction: false,
                observer: true,
                observeParents: true,
            })
        })
    </script>
</body>

</html>

<script>
    const {
        createApp,
        ref,
        reactive,
        onMounted
    } = Vue

    const { ElMessage } = ElementPlus

    createApp({
        setup() {
            const islogin = ref(false)

            var loginForm = reactive({
                account: '',
                password: '',
                captcha:''
            })

            var loginType = ref(1)

            var keyword = ref('')

            const timeOut = ref(60)
            let timer;

            const userData = reactive({
                data:{}
            })

            const hotgoods = ref([])


            const login = () => {
                if(loginType.value == 1){
                    $.ajax({
                    url: apiurl + '/api/front/login',
                    data: JSON.stringify(loginForm),
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            localStorage.setItem('token',res.data.token)
                            localStorage.setItem('userInfo',JSON.stringify(res.data))
                            ElMessage.success('登录成功')
                            checkLogin()
                        } else {
                           
                            ElMessage.error(res.message)

                        }
                    },
                })
                }else{
                    $.ajax({
                    url: apiurl + '/api/front/login/mobile',
                    data: JSON.stringify({
                        phone:loginForm.account,
                        captcha:loginForm.captcha
                    }),
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            localStorage.setItem('token',res.data.token)
                            localStorage.setItem('userInfo',JSON.stringify(res.data))
                            ElMessage.success('登录成功')
                            checkLogin()
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })
                }
                
            }

            const getHootGoods = () => {
                
                $.ajax({
                    url: apiurl + `/api/front/product/hot`,
                    data: {limit:30,page:1},
                    headers: {
                        'Content-Type': 'application/json',
                        "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
                    },
                    success: (res) => {
                        if (res.code == 200) {
                           hotgoods.value = res.data.list
                           console.log(hotgoods.value)
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })
            }
            

            const getCode = () => {
                if(!loginForm.account){
                    return ElMessage.error('手机号不能为空')
                }

                if(timeOut.value != 60){
                    return
                }
                
                $.ajax({
                    url: apiurl + `/api/front/sendCode?phone=${loginForm.account}`,
                    data: JSON.stringify({phone:loginForm.account}),
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            ElMessage.success('短信发送成功')

                            timer = setInterval(()=>{
                            timeOut.value--
                            if(timeOut.value == 0){
                                clearInterval(timer)
                                timeOut.value = 60
                            }
                           },1000)
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })
            }
            

            const loginOut = ()=>{
                localStorage.removeItem('token')
                localStorage.removeItem('userInfo')
                checkLogin()
            }

            const checkLogin = ()=>{
                let token = localStorage.getItem('token')?true:false
                if(token){
                    islogin.value = true
                    userData.data = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):{}
                }else{
                    islogin.value = false
                }
            }
            const toOrder = ()=>{
               window.location.href = './order.html'
            }
            const toCreateOrder = ()=>{
               window.location.href = './batch.html'
            }
            const chongzhipwd = ()=>{
               window.location.href = './changePwd.html'
            }
            

            onMounted(() => {
                checkLogin()
                getHootGoods()
            });

            return {
                islogin,
                checkLogin,
                userData,
                getHootGoods,
                toOrder,
                toCreateOrder,
                chongzhipwd,
                loginForm,
                login,
                getCode,
                hotgoods,
                loginOut,
                timeOut,
                loginType
            }
        },
    }).use(ElementPlus).mount('#app')
</script>